<template>

  <el-dialog
    title="打标签"
    :visible.sync="show"
    width="280px"
    id="dialog-pop"
    class="el-dialog-wrap"
  >
  
    <div class="pop-wrap">
      <el-radio-group
        class="flex flex-col"
        v-model="checked"
        @change="chooseTag"
      >
        <el-radio
          v-model="checked"
          class="tag-item"
          v-for="(item,index) of tagList"
          :key="index"
          :label="item"
          v-if="item.utTagName != '全部'"
        >{{item.utTagName}}</el-radio>
      </el-radio-group>
      <div
        class="add-tag flex flex-center"
        @click="addTag"
      >
        <i class="el-icon-plus"></i>
        <div class="add-tag-btn">添加标签</div>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="closePop"
      >取 消</el-button>
      <el-button
        type="primary"
        size="small"
        @click="pushTag"
      >确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
// import x from ''
export default {
  props: {
    tagList: {
      type: Array,
      default: []
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      checked: null
    }
  },

  mounted() {
    
  },
  methods: {
    closePop(){
      this.$emit('closePop')
    },
    pushTag() {
      this.$emit('pushTags', this.checked.userTagId)
    },
    chooseTag(e){
     
    },
    addTag() {
      this.$prompt('添加标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          console.log('成功', value)
          let params = {
            utTagName: value
          }
          
          this.$message({
            type: 'success',
            message: '已添加标签: ' + value
          })
          this.$emit('addTags', params)
        })
        .catch(() => {
          console.log('失败', value)
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    }
  }
}
</script>
<style lang='scss'>
.el-dialog-wrap {
  .el-dialog {
    box-shadow: 0px 2px 14px 0px rgba(153, 153, 153, 0.5);
    border-radius: 8px;
    .el-dialog__header {
      padding: 16px 25px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
    }
    .el-dialog__body {
      padding: 0;
    }
    .dialog-footer {
      margin-top: 10px;

      text-align: center;
    }
  }
}

.pop-wrap {
  width: 280px;
  border-bottom: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
  padding: 0 29px;
  box-sizing: border-box;
}

.tag-item {
  margin-top: 25px;
}

// 新增标签
.add-tag {
  margin-top: 22px;
  margin-bottom: 26px;
  color: #015dff;
  font-size: 14px;
}
.add-tag-btn {
  font-size: 12px;
  margin-left: 10px;
}
</style>